<template>
  <div style="background: #fff">
    <div>
      <van-nav-bar
        title="登录注册"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="box_body">
      <div class="head">
        <div class="img">
          <img src="../assets/icon/head.png" />
        </div>
        <!-- <p>app 登录模板</p> -->
      </div>
    </div>
    <div class="login_form">
      <account-login v-if="comshow"></account-login>
      <email-login v-else></email-login>
    </div>
    <div class="Howtodo">
      <p>
        <van-tag @click="Switch" color="#7232dd" plain>{{ btntext }}</van-tag>
      </p>

      <van-tag @click="toreg" color="#7232dd" plain>邮箱快速注册</van-tag>
    </div>
    <div>
      <van-divider
        :style="{ color: '#939393', borderColor: '#939393', padding: '0 16px' }"
      >
        第三方登录
      </van-divider>
    </div>
    <div>
      <van-grid>
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/icon-qq.png"
          text="QQ"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/icon-weixin.png"
          text="微信"
        />
        <van-grid-item
          icon="https://sss-1306551685.cos.ap-guangzhou.myqcloud.com/MobileShop/icon-weibo.png"
          text="微博"
        />
      </van-grid>
    </div>
  </div>
</template>

<script>
import EmailLogin from "../components/login/emailLogin.vue";
import Accountlogin from "../components/login/Accountlogin.vue";

export default {
  components: { "email-login": EmailLogin, "account-login": Accountlogin },
  inject: ["reload"],
  data() {
    return {
      comshow: false,
      btntext: "账号登录",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/Homepage");
    },
    Switch() {
      if (this.comshow) {
        this.comshow = false;
        this.btntext = "账号登录";
      } else {
        this.comshow = true;
        this.btntext = "邮箱登录";
      }
    },
    change() {},
    toreg() {
      this.$router.push("/register");
    },
  },
};
</script>
<style lang="less" scoped>
.box_body {
  width: 100%;
  overflow-x: hidden;
  //   background: url(../assets/icon/top_bg.png) top left no-repeat;
  background-size: 100%;
}
.head {
  //   height: 200px;
  .img {
    width: 4.45rem;
    height: 4.45rem;
    background: #292929;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 3.45rem;
    text-align: center;
    box-shadow: 0px 1px 4px 0px #c5c3c3;
    overflow: hidden;
    img {
      width: 4.45rem;
    }
  }
  p {
    text-align: center;
    color: #ffffff;
    font-size: 0.7rem;
    padding-top: 0.15rem;
  }
}
.login_form {
  width: 100%;
  height: auto;
  overflow: hidden;
  padding: 1.85rem 0.45rem 0.45rem 0.45rem;
  //   margin: 30px 0;
}
.van-grid {
  justify-content: center;
}
.Howtodo {
  display: flex;
  justify-content: space-around;
}
.van-tag--plain {
  margin-left: 4px;
}
</style>